import { DataType, Direct } from '@/service/modules/task-instances/types'
import { TaskDefinedLog } from '@/service/modules/task-manage/types'
import { DeleteOutlined } from '@vicons/antd'
import { AddCircle } from '@vicons/ionicons5'
import {
  FormRules,
  NButton,
  NForm,
  NFormItem,
  NInput,
  NSelect,
  SelectOption
} from 'naive-ui'
import { VNode, h } from 'vue'

const directOptions: SelectOption[] = [
  {
    value: 'IN',
    label: 'IN'
  },
  {
    value: 'OUT',
    label: 'OUT'
  }
]
const dataTypeOptions: SelectOption[] = [
  {
    value: 'VARCHAR',
    label: 'VARCHAR'
  },
  {
    value: 'INTEGER',
    label: 'INTEGER'
  },
  {
    value: 'LONG',
    label: 'LONG'
  },
  {
    value: 'FLOAT',
    label: 'FLOAT'
  },
  {
    value: 'DOUBLE',
    label: 'DOUBLE'
  },
  {
    value: 'DATE',
    label: 'DATE'
  },
  {
    value: 'TIME',
    label: 'TIME'
  },
  {
    value: 'TIMESTAMP',
    label: 'TIMESTAMP'
  },
  {
    value: 'BOOLEAN',
    label: 'BOOLEAN'
  },
  {
    value: 'LIST',
    label: 'LIST'
  }
]
export function useLocalParams(taskLog: TaskDefinedLog): VNode {
  return h('div', null, [
    h('div', null, '自定义参数'),
    ...taskLog.taskParams.localParams.map((item, index) => {
      const rules: FormRules = {
        prop: {
          trigger: ['input', 'blur'],
          required: true,
          validator() {
            if (!item.prop) {
              return new Error()
            }
          }
        }
      }
      return h(
        NForm,
        { inline: true, showFeedback: false, showLabel: false, rules: rules },
        [
          h(
            NFormItem,
            { path: 'prop', style: 'margin-right:2px' },
            h(NInput, {
              value: item.prop,
              onUpdateValue: (v: string) => {
                item.prop = v
              },
              size: 'tiny',
              placeholder: 'prop(必填)',
              style: 'width:120px'
            })
          ),
          h(
            NFormItem,
            { style: 'margin-right:2px' },
            h(NSelect, {
              value: item.direct,
              onUpdateValue: (v: Direct) => {
                item.direct = v
              },
              options: directOptions,
              consistentMenuWidth: false,
              size: 'tiny',
              style: 'width:100px'
            })
          ),
          h(
            NFormItem,
            { style: 'margin-right:2px' },
            h(NSelect, {
              value: item.type,
              onUpdateValue: (v: DataType) => {
                item.type = v
              },
              options: dataTypeOptions,
              consistentMenuWidth: false,
              size: 'tiny',
              style: 'width:150px'
            })
          ),
          h(
            NFormItem,
            { style: 'margin-right:2px' },
            h(NInput, {
              value: item.value,
              onUpdateValue: (v: string) => {
                item.value = v
              },
              size: 'tiny',
              placeholder: 'value(选填)',
              style: 'width:120px'
            })
          ),
          h(
            NFormItem,
            { style: 'margin-right:2px' },
            h(
              NButton,
              {
                size: 'tiny',
                type: 'error',
                circle: true,
                onClick: () => {
                  taskLog.taskParams.localParams.splice(index, 1)
                }
              },
              {
                icon: () => h(DeleteOutlined)
              }
            )
          )
        ]
      )
    }),
    h(
      NButton,
      {
        size: 'tiny',
        type: 'info',
        circle: true,
        onClick: () => {
          taskLog.taskParams.localParams.push({
            prop: `prop${taskLog.taskParams.localParams.length + 1}`,
            direct: 'IN',
            type: 'VARCHAR',
            value: null
          })
        }
      },
      {
        icon: () => h(AddCircle)
      }
    )
  ])
}
